<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>

          <el-col :span="6">
            <el-form-item label="项目">
              <el-select v-model="query.project" placeholder="请选择"
                         clearable
              >
                <el-option v-for="(item, index) in projectOptions" :key="index"
                           :label="item.fullName" :value="item.id"
                           :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
              <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
        <div class="JNPF-common-head">
          <div>
            <el-button type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增
            </el-button>

            <el-button type="primary"  @click="jiaoyan()">校验租金收至
            </el-button>
          </div>
          <div class="JNPF-common-head-right">
            <el-tooltip content="高级查询" placement="top" v-if="true">
              <el-link icon="icon-ym icon-ym-filter JNPF-common-head-icon" :underline="false"
                       @click="openSuperQuery()"
              />
            </el-tooltip>
            <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
              <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon" :underline="false"
                       @click="initData()"
              />
            </el-tooltip>
          </div>
        </div>
        <JNPF-table v-loading="listLoading" :data="list" @sort-change="sortChange" :span-method="arraySpanMethod"
        >

          <el-table-column
            prop="contractnumber_name"
            label="合同编号"
            align="left"
            width="210px"
          >
            <template slot-scope="scope">
              <a style="color:#00afff"  @click="addOrUpdateHandle1(scope.row)">{{scope.row.contractnumber_name}}</a>
            </template>
          </el-table-column>

<!--          <el-table-column prop="contractnumber_name" width="200px" label="合同编号" align="left"-->
<!--          />-->
<!--          <el-table-column prop="contracttype_name" label="合同类型" align="left"-->
<!--          />-->
<!--          <el-table-column prop="project_name" width="250px" label="项目" align="left"-->
<!--          />-->
          <el-table-column prop="zcName" width="150px" label="资产" align="left"
          />
<!--          <el-table-column label="关联合同" prop="relatedContracts" algin="left"-->
<!--          >-->
<!--            <template slot-scope="scope">-->
<!--              {{ scope.row.relatedContracts | dynamicText(relatedContractsOptions) }}-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column prop="signingdate_name"   width="120px" label="签订日期" align="left"
          />
          <el-table-column prop="effectivedate_name"  width="120px" label="生效日期" align="left"
          />
          <el-table-column prop="purposehouse_name"   width="220px"  label="房屋用途" align="left"
          />





          <el-table-column prop="contracthandler_name" label="合同经办人" align="left"  width="170px"
          />
<!--          <el-table-column prop="ihis_name" label="是否为历史合同" align="left"-->
<!--          />-->
<!--          <el-table-column prop="notes_name" label="备注" align="left"-->
<!--          />-->
<!--          <el-table-column label="甲方名称" prop="partyName" algin="left"-->
<!--          >-->
<!--            <template slot-scope="scope">-->
<!--              {{ scope.row.partyName | dynamicText(partyNameOptions) }}-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column prop="partyBusinessLicense_name" label="甲方营业执照" align="left"-->
<!--          />-->
<!--          <el-table-column prop="partyContacts_name" label="甲方联系人" align="left"-->
<!--          />-->
<!--          <el-table-column prop="partyContactInformation_name" label="甲方联系方式" align="left"-->
<!--          />-->
<!--          <el-table-column prop="tableField177" label="设计子表" align="center">-->
<!--            <el-table-column prop="tableField177-child-first" width="1px"-->
<!--                             label-class-name="table-child-first"-->
<!--            >-->
<!--              <template slot-scope="scope">-->
<!--                <div class="child-table-column">-->
<!--                  <template v-if="!scope.row.tableField177Expand">-->
<!--                    <tr v-for="(item, index) in scope.row.tableField177.slice(0, 3)"-->
<!--                        class="child-table__row" :key="index"-->
<!--                    >-->
<!--                      <td class="td-child-first">-->
<!--                        <div class="cell"></div>-->
<!--                      </td>-->
<!--                      <td class="td-flex-1">-->
<!--                        <div class="cell">-->
<!--                          {{ item.pabIdNo }}-->
<!--                        </div>-->
<!--                      </td>-->
<!--                      <td class="td-flex-1">-->
<!--                        <div class="cell">-->
<!--                          {{ item.pabContactAddress }}-->
<!--                        </div>-->
<!--                      </td>-->
<!--                    </tr>-->
<!--                  </template>-->
<!--                  <template v-if="scope.row.tableField177Expand">-->
<!--                    <tr v-for="(item, index) in scope.row.tableField177" class="child-table__row" :key="index">-->
<!--                      <td class="td-child-first">-->
<!--                        <div class="cell"></div>-->
<!--                      </td>-->
<!--                      <td class="td-flex-1">-->
<!--                        <div class="cell">-->
<!--                          {{ item.pabIdNo }}-->
<!--                        </div>-->
<!--                      </td>-->
<!--                      <td class="td-flex-1">-->
<!--                        <div class="cell">-->
<!--                          {{ item.pabContactAddress }}-->
<!--                        </div>-->
<!--                      </td>-->
<!--                    </tr>-->
<!--                  </template>-->
<!--                  <div class="expand-more-btn" v-if="scope.row.tableField177.length > 3">-->
<!--                    <el-button v-if="scope.row.tableField177Expand" type="text"-->
<!--                               @click="scope.row.tableField177Expand=!scope.row.tableField177Expand"-->
<!--                    >隐藏部分-->
<!--                    </el-button>-->
<!--                    <el-button v-if="!scope.row.tableField177Expand" type="text"-->
<!--                               @click="scope.row.tableField177Expand=!scope.row.tableField177Expand"-->
<!--                    >加载更多-->
<!--                    </el-button>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="tableField177-pabIdNo" label="乙方证件号码" width="100"/>-->
<!--            <el-table-column prop="tableField177-pabContactAddress" label="乙方联系地址" width="100"/>-->
<!--          </el-table-column>-->

          <el-table-column prop="starttime_name" width="120px"  label="合同起始日期" align="left"
          />
          <el-table-column prop="endtime_name" width="120px"  label="合同结束日期" align="left"
          />
          <el-table-column prop="totalBalance"   width="120px"  label="合同余额" align="left"
          />
          <el-table-column prop="zjsz"   width="120px"  label="租金收至" align="left"
          />
          <el-table-column prop="bzjsm"   width="120px"  label="保证金说明" align="left"
          />

          <!--          <el-table-column prop="paymentDeadlineType_name" label="交费期限类型" align="left"-->
<!--          />-->
<!--          <el-table-column prop="paymentDeadline_name" label="交费期限日" align="left"-->
<!--          />-->
<!--          <el-table-column prop="paymentDeadlineStatus_name" label="交费期限状态 " align="left"-->
<!--          />-->
<!--          <el-table-column prop="paymentZdrq_name" label="交费期限日指定日期" align="left"-->
<!--          />-->
<!--          <el-table-column prop="tableField171" label="设计子表" align="center">-->
<!--            <el-table-column prop="tableField171-child-first" width="1px"-->
<!--                             label-class-name="table-child-first"-->
<!--            >-->
<!--              <template slot-scope="scope">-->
<!--                <div class="child-table-column">-->
<!--                  <template v-if="!scope.row.tableField171Expand">-->
<!--                    <tr v-for="(item, index) in scope.row.tableField171.slice(0, 3)"-->
<!--                        class="child-table__row" :key="index"-->
<!--                    >-->
<!--                      <td class="td-child-first">-->
<!--                        <div class="cell"></div>-->
<!--                      </td>-->
<!--                      <td class="td-flex-1">-->
<!--                        <div class="cell">-->
<!--                          {{ item.spaceName }}-->
<!--                        </div>-->
<!--                      </td>-->
<!--                      <td class="td-flex-1">-->
<!--                        <div class="cell">-->
<!--                          {{ item.operatingArea }}-->
<!--                        </div>-->
<!--                      </td>-->
<!--                      <td class="td-flex-1">-->
<!--                        <div class="cell">-->
<!--                          {{ item.spaceType }}-->
<!--                        </div>-->
<!--                      </td>-->
<!--                      <td class="td-flex-1">-->
<!--                        <div class="cell">-->
<!--                          {{ item.rentalStatus }}-->
<!--                        </div>-->
<!--                      </td>-->
<!--                    </tr>-->
<!--                  </template>-->
<!--                  <template v-if="scope.row.tableField171Expand">-->
<!--                    <tr v-for="(item, index) in scope.row.tableField171" class="child-table__row" :key="index">-->
<!--                      <td class="td-child-first">-->
<!--                        <div class="cell"></div>-->
<!--                      </td>-->
<!--                      <td class="td-flex-1">-->
<!--                        <div class="cell">-->
<!--                          {{ item.spaceName }}-->
<!--                        </div>-->
<!--                      </td>-->
<!--                      <td class="td-flex-1">-->
<!--                        <div class="cell">-->
<!--                          {{ item.operatingArea }}-->
<!--                        </div>-->
<!--                      </td>-->
<!--                      <td class="td-flex-1">-->
<!--                        <div class="cell">-->
<!--                          {{ item.spaceType }}-->
<!--                        </div>-->
<!--                      </td>-->
<!--                      <td class="td-flex-1">-->
<!--                        <div class="cell">-->
<!--                          {{ item.rentalStatus }}-->
<!--                        </div>-->
<!--                      </td>-->
<!--                    </tr>-->
<!--                  </template>-->
<!--                  <div class="expand-more-btn" v-if="scope.row.tableField171.length > 3">-->
<!--                    <el-button v-if="scope.row.tableField171Expand" type="text"-->
<!--                               @click="scope.row.tableField171Expand=!scope.row.tableField171Expand"-->
<!--                    >隐藏部分-->
<!--                    </el-button>-->
<!--                    <el-button v-if="!scope.row.tableField171Expand" type="text"-->
<!--                               @click="scope.row.tableField171Expand=!scope.row.tableField171Expand"-->
<!--                    >加载更多-->
<!--                    </el-button>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="tableField171-spaceName" label="空间名称" width="100"/>-->
<!--            <el-table-column prop="tableField171-operatingArea" label="经营面积" width="100"/>-->
<!--            <el-table-column prop="tableField171-spaceType" label="空间类型" width="100"/>-->
<!--            <el-table-column prop="tableField171-rentalStatus" label="租赁状态" width="100"/>-->
<!--          </el-table-column>-->

          <el-table-column prop="flowState" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.flowState==1">等待审核</el-tag>
              <el-tag type="success" v-else-if="scope.row.flowState==2">审核通过</el-tag>
              <el-tag type="danger" v-else-if="scope.row.flowState==3">审核驳回</el-tag>
              <el-tag type="info" v-else-if="scope.row.flowState==4">流程撤回</el-tag>
              <el-tag type="info" v-else-if="scope.row.flowState==5">审核终止</el-tag>
              <el-tag type="warning" v-else>等待提交</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right"
                           width="200"
          >
            <template slot-scope="scope">
              <el-button type="text" :disabled="[1,2,5].indexOf(scope.row.flowState)>-1"
                         @click="addOrUpdateHandle(scope.row.id)"
              >编辑
              </el-button>
              <el-button type="text" class="JNPF-table-delBtn" :disabled="[1,2,3,5].indexOf(scope.row.flowState)>-1"
                         @click="handleDel(scope.row.id)"
              >删除
              </el-button>
<!--              <el-button size="mini" type="text" :disabled="!scope.row.flowState"-->
<!--                         @click="addOrUpdateHandle(scope.row.id,scope.row.flowState)"-->
<!--              >详情-->
<!--              </el-button>-->

              <el-button size="mini" type="text" :disabled="!scope.row.flowState"
                         @click="addOrUpdateHandle1(scope.row)"
              >详情
              </el-button>
              <el-dropdown>
                <el-button size="mini" type="text" :disabled="!scope.row.flowState"

                >更多<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>

                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button type="text"
                               @click="changeInfo(scope.row.id)"
                    >基础信息变更
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="text"
                               @click="changeFy(scope.row.id)"
                    >商务条款变更
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="text"
                               @click="changeOther(scope.row.id)"
                    >其他条款变更
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="text"
                               @click="changeStop(scope.row.id)"
                    >合同终止
                    </el-button>
                  </el-dropdown-item>

                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </JNPF-table>
        <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
                    @pagination="initData"
        />
      </div>
    </div>
    <JNPF-Form   @close="colseFlow"  v-if="formVisible1" ref="JNPFForm" />
    <FlowBox v-if="flowVisible" ref="FlowBox" @close="colseFlow"/>
    <ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download"/>
    <SuperQuery v-if="superQueryVisible" ref="SuperQuery" :columnOptions="superQueryJson"
                @superQuery="superQuery"
    />
  </div>
</template>

<script>
import request from '@/utils/request'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import FlowBox from '@/views/workFlow/components/FlowBox'
import ExportBox from './ExportBox'
import { getDataInterfaceRes } from '@/api/systemData/dataInterface'
import JNPFForm from './FormDetail'
import columnList from './columnList'
import SuperQuery from '@/components/SuperQuery'
import superQueryJson from './superQueryJson'

export default {
  components: { JNPFForm,FlowBox, ExportBox, SuperQuery },
  data() {
    return {
      expandObj: {},
      columnOptions: [],
      tableField177Expand: {},
      tableField171Expand: {},
      mergeList: [],
      exportList: [],
      columnList,

      formVisible1: false,
      superQueryVisible: false,
      superQueryJson,
      query: {
        project: undefined
      },
      treeProps: {
        children: 'children',
        label: 'fullName',
        value: 'id'
      },
      list: [],
      listLoading: true,
      total: 0,
      listQuery: {
        superQueryJson: '',
        currentPage: 1,
        pageSize: 20,
        sort: 'desc',
        sidx: ''
      },
      flowVisible: false,
      exportBoxVisible: false,
      contractTypeOptions: [],
      contractTypeProps: { 'label': 'fullName', 'value': 'id' },
      projectOptions: [],
      projectProps: { 'label': 'fullName', 'value': 'id' },
      relatedContractsOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      relatedContractsProps: { 'label': 'fullName', 'value': 'id' },
      partyNameOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      partyNameProps: { 'label': 'fullName', 'value': 'id' },
      paymentDeadlineTypeOptions: [],
      paymentDeadlineTypeProps: { 'label': 'fullName', 'value': 'id' },
      paymentDeadlineStatusOptions: [],
      paymentDeadlineStatusProps: { 'label': 'fullName', 'value': 'id' },
      tableField177_pabCustomerNameOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      tableField177_pabIdTypeOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }]
    }
  },
  computed: {
    menuId() {
      return this.$route.meta.modelId || ''
    }
  },
  created() {
    this.getColumnList(),
      this.initData()
    this.getprojectOptions()
  },
  methods: {
    changeInfo(id, flowState) {

      let data = {
        id: id || '',
        enCode: 'htbg',
        flowId: '652494045334996741',
        formType: 1,
        opType: flowState ? 0 : '-1',
        status: flowState
      }
      this.flowVisible = true
      this.$nextTick(() => {
        this.$refs.FlowBox.init(data)
      })
    },
    changeFy(id, flowState) {

      let data = {
        id: id || '',
        enCode: 'htbgzj',
        flowId: '653200479202857541',
        formType: 1,
        opType: flowState ? 0 : '-1',
        status: flowState
      }
      this.flowVisible = true
      this.$nextTick(() => {
        this.$refs.FlowBox.init(data)
      })
    },
    changeOther(id, flowState) {

      let data = {
        id: id || '',
        enCode: 'htbgother',
        flowId: '653200677887038021',
        formType: 1,
        opType: flowState ? 0 : '-1',
        status: flowState
      }
      this.flowVisible = true
      this.$nextTick(() => {
        this.$refs.FlowBox.init(data)
      })
    },
    changeStop(id, flowState) {

      let data = {
        id: id || '',
        enCode: 'htzz',
        flowId: '667687223373617221',
        formType: 1,
        opType: flowState ? 0 : '-1',
        status: flowState
      }
      this.flowVisible = true
      this.$nextTick(() => {
        this.$refs.FlowBox.init(data)
      })
    },


    getColumnList() {
      // 没有开启权限
      this.columnOptions = this.transformColumnList(this.columnList)
    },
    transformColumnList(columnList) {
      let list = []
      for (let i = 0; i < columnList.length; i++) {
        const e = columnList[i]
        if (!e.prop.includes('-')) {
          list.push(e)
        } else {
          let prop = e.prop.split('-')[0]
          let label = e.label.split('-')[0]
          let vModel = e.prop.split('-')[1]
          let newItem = {
            align: 'center',
            jnpfKey: 'table',
            prop,
            label,
            children: []
          }
          e.vModel = vModel
          if (!this.expandObj.hasOwnProperty(`${prop}Expand`)) this.$set(this.expandObj, `${prop}Expand`, false)
          if (!list.some(o => o.prop === prop)) list.push(newItem)
          for (let i = 0; i < list.length; i++) {
            if (list[i].prop === prop) {
              list[i].children.push(e)
              break
            }
          }
        }
      }
      this.getMergeList(list)
      this.getExportList(list)
      return list
    },
    arraySpanMethod({ column }) {
      for (let i = 0; i < this.mergeList.length; i++) {
        if (column.property == this.mergeList[i].prop) {
          return [this.mergeList[i].rowspan, this.mergeList[i].colspan]
        }
      }
    },
    getMergeList(list) {
      let newList = JSON.parse(JSON.stringify(list))
      newList.forEach(item => {
        if (item.children && item.children.length) {
          let child = {
            prop: item.prop + '-child-first'
          }
          item.children.unshift(child)
        }
      })
      newList.forEach(item => {
        if (item.children && item.children.length > 0) {
          item.children.forEach((child, index) => {
            if (index == 0) {
              this.mergeList.push({
                prop: child.prop,
                rowspan: 1,
                colspan: item.children.length
              })
            } else {
              this.mergeList.push({
                prop: child.prop,
                rowspan: 0,
                colspan: 0
              })
            }
          })
        } else {
          this.mergeList.push({
            prop: item.prop,
            rowspan: 1,
            colspan: 1
          })
        }
      })
    },
    getExportList(list) {
      let exportList = []
      for (let i = 0; i < list.length; i++) {
        if (list[i].jnpfKey === 'table') {
          for (let j = 0; j < list[i].children.length; j++) {
            exportList.push(list[i].children[j])
          }
        } else {
          exportList.push(list[i])
        }
      }
      this.exportList = exportList
    },
    getprojectOptions() {
      getDictionaryDataSelector('622532443626277701').then(res => {
        this.projectOptions = res.data.list
      })
    },
    sortChange({ column, prop, order }) {
      this.listQuery.sort = order == 'ascending' ? 'asc' : 'desc'
      this.listQuery.sidx = !order ? '' : prop
      this.initData()
    },
    jiaoyan(){

      request({
        url: `/api/example/ZcglHtglInfo/js`,
        method: 'post',
        data: null
      }).then(res => {

      })

    },

    initData() {
      this.listLoading = true
      let _query = {
        ...this.listQuery,
        ...this.query,
        keyword: this.keyword,
        dataType: 0,
        menuId: this.menuId
      }
      request({
        url: `/api/example/ZcglHtglInfo/getList`,
        method: 'post',
        data: _query
      }).then(res => {
        var _list = []
        for (let i = 0; i < res.data.list.length; i++) {
          let _data = res.data.list[i]

          _list.push(_data)
        }
        this.list = _list.map(o => ({
          ...o,
          ...this.expandObj
        }))
        this.total = res.data.pagination.total
        this.listLoading = false
      })
    },
    handleDel(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        request({
          url: `/api/example/ZcglHtglInfo/${id}`,
          method: 'DELETE'
        }).then(res => {
          this.$message({
            type: 'success',
            message: res.msg,
            onClose: () => {
              this.initData()
            }
          })
        })
      }).catch(() => {
      })
    },
    openSuperQuery() {
      this.superQueryVisible = true
      this.$nextTick(() => {
        this.$refs.SuperQuery.init()
      })
    },
    superQuery(queryJson) {
      this.listQuery.superQueryJson = queryJson
      this.listQuery.currentPage = 1
      this.initData()
    },
    addOrUpdateHandle1(id) {

      this.formVisible1 = true
      this.$nextTick(() => {
        this.$refs.JNPFForm.init(id)
      })
    },

    addOrUpdateHandle(id, flowState) {
      let data = {
        id: id || '',
        enCode: 'htgl',
        flowId: '648170735931499397',
        formType: 1,
        opType: flowState ? 0 : '-1',
        status: flowState
      }
      this.flowVisible = true
      this.$nextTick(() => {
        this.$refs.FlowBox.init(data)
      })
    },

    exportData() {
      this.exportBoxVisible = true
      this.$nextTick(() => {
        this.$refs.ExportBox.init(this.exportList)
      })
    },
    download(data) {
      let query = { ...data, ...this.listQuery, ...this.query, menuId: this.menuId }
      request({
        url: `/api/example/ZcglHtglInfo/Actions/Export`,
        method: 'post',
        data: query
      }).then(res => {
        if (!res.data.url) return
        this.jnpf.downloadFile(res.data.url)
        this.$refs.ExportBox.visible = false
        this.exportBoxVisible = false
      })
    },
    search() {
      this.listQuery.currentPage = 1
      this.listQuery.pageSize = 20
      this.listQuery.sort = 'desc'
      this.listQuery.sidx = ''
      this.initData()
    },
    colseFlow(isrRefresh) {
      this.flowVisible = false
      this.formVisible1 = false
      if (isrRefresh) this.reset()
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined
      }
      this.search()
    }
  }
}
</script>
